.sidebar {
  transition: margin-left 0.5s; 
}
  
.sidebar.hidden {
    margin-left: -200px; 
  }
  
#mainContent {
  transition: margin-left 0.5s;
}

#mainContent.hidden {
  margin-left: 0; /* Adjusted margin to match your HTML structure */
}

#mainContent.expanded {
  margin-left: 200px;
}


/*font*/

#header_wrap{
  font-family: Arial, Helvetica, sans-serif
 }
 
 @font-face {
   font-family: "lucida-grande";
   font-weight: 100;
   src: url('/fonts/LUCIDAG.TTF') format('truetype');
 }

 @font-face {
  font-family:monospace;
  src: url(/fonts/ubuntu/ubuntumono.ttf) format(truetype);

 }
 

 p{
  font-family: "lucida-grande" ;
  font-weight: 100;
 }

.mono {
  font-family: monospace;
  font-size:x-large;
  text-decoration: none;
  color: rgb(90, 131, 208);
}

/* arrow button image style */
.toggle-button img {
  transition: transform 0.3s ease; 
}

/* rotat arrow when sidebar hide */
.toggle-button.hidden img {
  transform: rotate(90deg);
}

.toggle-button{
  transition: margin-left 0.5s;
}

.toggle-button.hidden{
  margin-left: -32%;
}

.toggle-button {
  position: fixed;
  top: 90%;
  left: 35%;
  z-index: 2;
}

/* main content style */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  position: fixed;
  background-color: #37393d;
  color: rgb(255, 255, 255);
}


/* container */
.scroll-container {
  height: 75px; /* container height */
  background: #212121;
  background: linear-gradient(to top, #373737, #212121);
  width: 100%;
  position: fixed;
  z-index: 3;
}

/* content in container */
.scroll-content {
  margin-top: 17px;
  white-space: nowrap; 
  animation: scrollText 5s linear infinite; 
  color: rgb(255, 255, 255);
  font-size:xx-large;
  width: 100%;
}

/*scrolling text ani */
@keyframes scrollText {
  0% {transform: translateX(100%);}
  100% { transform: translateX(-100%);}
}

/* Rotate arrow animation */
@keyframes arrowmove {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(90deg);}
}

.header {
  background-color: #333;
  color: rgb(255, 255, 255);
  height: 75px;
  width: 100%;
  position:fixed;
  top: 0;
  z-index: 2; 
  overflow: hidden;
}

.sidebar {
  height: 100%;
  margin-top: 15px;
  width: 200px; 
  position: fixed;
  top: 40px; 
  background-color: #333;
  padding-top: 20px;
  background: linear-gradient(to bottom, #373737, #212121);
}

.tab {
  padding: 8px 16px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  display: block;
}

.tab:hover {
  background-color: #555;
}

/* active tab style */
.tab.active {
  background-color: #666;
}

/* content sections */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}


/*unordered list (I RIPPED THIS OFF SLATE THEME)*/
ul {
  list-style-position: inside;
  list-style: disc;
  padding-left: 20px
}


li{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline
}

html{
  scroll-behavior: smooth;
}